<template>
  <a-card :bordered="false">
    <h3>尺码反馈</h3>
    <SizeFeedbackFilter
      ref="filter"
      @onExportResult="onExportResult"
      @onOpenModal="handleOpenModal"
      @onSearch="onSearch"
    ></SizeFeedbackFilter>
    <s-table ref="table" bordered size="default" :rowKey="record => record.id" :columns="columns" :data="loadData" :pagination="paginationProps" :scroll="{ x: 1300 }">
      <span slot="avatar"  slot-scope="text, record">
        <img class="img" v-if="record.headimgurl" :src="record.headimgurl" alt="">
        <a-avatar v-else shape="square" :size="64" icon="user" />
      </span>
      <span slot="userInfo" slot-scope="text, record">
        <div v-if="record.weight">*体重({{record.weight}}kg)</div>
        <div v-if="record.height">*身高({{record.height}}cm)</div>
        <div v-if="record.waist">腰围({{record.waist}}cm)</div>
        <div v-if="record.hip">臀围({{record.hip}}cm)</div>
        <div v-if="record.chest">胸围({{record.chest}}cm)</div>
        <div v-if="record.shoulder">肩宽({{record.shoulder}}cm)</div>
      </span>
      <span slot="feedbackResult" slot-scope="text, record">
        <div v-if="record.feedbackValue && record.feedbackValue.length && record.feedbackValue[0]">{{ record.feedbackSize || '尺码' }}：{{ record.feedbackValue.length ? record.feedbackValue[0] : '' }}</div>
        <div v-for="(item, index) in record.feedbackItemObj" :key="index">{{ item.feedbackItemKey }}：{{ item.feedbackItemValue }}</div>
      </span>
      <span slot="feedbackSource" slot-scope="text, record">
        <div v-if="record.feedbackSource == 1">后台录入</div>
        <div v-if="record.feedbackSource == 2">订单评价</div>
      </span>
      <span slot="displayStatus" slot-scope="text, record">
        <!-- 0隐藏 1机审核中 2机审核不通过 3人审核中 4人审核不通过 5显示 -->
        <div v-if="record.displayStatus == 0">隐藏</div>
        <!-- <div v-if="record.displayStatus == 1">机审核中</div>
        <div v-if="record.displayStatus == 2">机审核不通过</div>
        <div v-if="record.displayStatus == 3">人审核中</div>
        <div v-if="record.displayStatus == 4">人审核不通过</div> -->
        <div v-if="record.displayStatus == 5">显示中</div>
      </span>
      <span class="action" slot="action" slot-scope="text, record">
        <a v-if="record.feedbackSource == 1" @click="handleOpenModal(3, record)">编辑</a>
        <a-divider v-if="record.feedbackSource == 1 && (record.displayStatus == 0 || record.displayStatus == 5)" type="vertical" />
        <a v-if="record.displayStatus == 5" @click="handleToggleDisplayStatus(record)">隐藏</a>
        <a v-if="record.displayStatus == 0" @click="handleToggleDisplayStatus(record)">取消隐藏</a>
      </span>
    </s-table>
    <SizeFeedbackModal :type="type" :visible.sync="visible" :item="item" :feedbackValue="feedbackValue" :feedbackItem="feedbackItem" @onImportChange="onImportChange" @onFormChange="onFormChange"></SizeFeedbackModal>
  </a-card>
</template>
<script>
import { feedbackOpenHide, feedbackTry, feedbackExport, feedbackTryUpdate, feedbackModelAdd, feedbackModelDetails } from '@/api/micromall/sizeRecommendation'
import { STable } from '@/views/box/components'
import SizeFeedbackFilter from '../components/SizeFeedbackFilter'
import SizeFeedbackModal from '../components/SizeFeedbackModal'
import { columns } from './sizeFeedback.js'
import qs from 'qs'

export default {
  components: {
    SizeFeedbackFilter,
    SizeFeedbackModal,
    STable
  },
  data() {
    return {
      feedbackTemplate: {},
      type: 1,
      item: '',
      feedbackValue: [],
      feedbackItem: [],
      visible: false,
      columns,
      paginationProps: {
        total: 0,
        showTotal: total => `共有 ${total} 条数据`
        // onShowSizeChange: (current, pageSize) => this.changePageSize(current, pageSize)
      },
      queryParam: {},
      // 加载数据方法 必须为 Promise 对象
      loadData: parameter => {
        const data = {
          ...this.queryParam,
          current: parameter.pageNo,
          size: parameter.pageSize
        }
        return feedbackTry(data).then(res => {
          if (res.code === 200) {
            const { records, total, size, current } = res.data
            const currentRecords = records.map(e => {
              return {
                  ...e,
                  feedbackResult: e.feedbackValue.length ? e.feedbackValue[0] : '',
                  feedbackItemObj: e.feedbackItem.map(item => {
                    for (let i in item) {
                      return {
                        feedbackItemKey: i,
                        feedbackItemValue: item[i]
                      }
                    }
                  })
                }
            })
            const data = {
              page: {
                count: total,
                pageNo: current,
                pageSize: size,
                pages: Math.ceil(total / size)
              },
              data: currentRecords
            }
            return data
          } else {
            this.$message.error(res.msg || res.message)
            const data = {
              page: {
                count: 0,
                pageNo: 0,
                pages: 0
              },
              data: []
            }
            return data
          }
        })
      }
    }
  },
  created() {
    this.getFeedbackModelDetails()
  },
  computed: {},
  mounted() {},
  activated() {
  },
  watch: {
  },
  methods: {
    onImportChange() {
      this.$refs.table.refresh(true)
    },

    handleOpenModal(type, item) {
      this.type = type
      this.visible = true
      if (type == 1) {
        this.item = ''
      }
      if (type == 3) {
        this.item = JSON.stringify(item)
      }
    },

    // 获取反馈模板
    getFeedbackModelDetails() {
      feedbackModelDetails().then(res => {
        if (res.code === 200) {
          const {feedbackValue,feedbackItem} = res.data
          this.feedbackTemplate = res.data
          this.feedbackValue = feedbackValue.map(e => {return {valueName: e}})
          this.feedbackItem = feedbackItem.map(e=> {
            for (let i in e) {
              return {title: i ,sort: e[i]}
            }
          })
        } else {
          this.$message.error(res.msg || res.message)
        }
      })
    },

    
      
    // 导出查询结果
    onExportResult() {
      window.location.href =  feedbackExport + `?${qs.stringify(this.queryParam)}`
    },

    // 编辑反馈模板、编辑尺码
    onFormChange(v) {
      const feedbackRequest = this.type == 1 ? feedbackModelAdd : feedbackTryUpdate
      let data = {}
      const {feedbackItem, feedbackValue} = v
      if (this.type == 1) {
         // 编辑反馈模板
        const currentFeedbackItem = feedbackItem.length ? feedbackItem.map(e => {return {[e.title]:e.sort}}) : []
        const currentFeedbackValue = feedbackItem.length ? feedbackValue.map(e => e.valueName) : []
        const {id, feedbackSize, name} = this.feedbackTemplate
        data = {
          ...this.feedbackTemplate,
          id: id ? id: 0,
          name: name ? name : '试穿反馈模版',
          feedbackSize: feedbackSize ? feedbackSize : '尺码',
          feedbackItem: currentFeedbackItem,
          feedbackValue: currentFeedbackValue
        }
      } else {
        // 编辑尺码
        const {feedbackResult, feedbackItemObj} = v
        const currentFeedbackItem = feedbackItemObj.length ? feedbackItemObj.map(e => {return {[e.feedbackItemKey]:e.feedbackItemValue}}) : []
        data = {
          ...v,
          feedbackItem: currentFeedbackItem,
          feedbackValue: [feedbackResult]
        }
      }
      feedbackRequest(data).then(res => {
        if (res.code === 200) {
          this.visible = false
          if (this.type == 1) {
            this.$message.success(`反馈模板保存成功！`)
            this.getFeedbackModelDetails()
          } else {
            this.$message.success(`保存成功！`)
            this.$refs.table.refresh()
          }
        } else {
          this.$message.error(res.msg || res.message)
        }
      })
    },

    // 1显示2隐藏
    handleToggleDisplayStatus(item) {
      const {id, displayStatus} = item
      const data = {
        id,
        displayStatus: displayStatus == 5 ? 0 : 5
      }
      feedbackOpenHide(data).then(res => {
        if (res.code === 200) {
          this.$refs.table.refresh()
        } else {
          this.$message.error(res.msg || res.message)
        }
      })
    },

    //查询
    onSearch(obj) {
      console.log(obj, 'obj')
      this.queryParam = obj
      this.$refs.table.refresh(true)
    }
  }
}
</script>
<style lang="less" scoped>
.img {
  display: block;
  margin: 0 auto;
  width: 65px;
  height: 65px;
  border: 1px dashed #f5f5f5;
  object-fit: scale-down;
}
.table-header{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
</style>
